<template>
	<view>
		<view class="viewTab" v-if="tabBar">
			<view class="tabBar" :style="{ '--color': color, backgroundColor: tabBar.bgColor }">
				<view class="list flex-1" v-for="(item, index) in tabBar.list.slice(0, 2)" :key="item.id" :class="tab == item.id ? 'theme' : 'color_66'" @click="swichTab(item)">
					<view class="iconfont size40 m-bot4" :class="item.icon"></view>
					<text class="h6">{{ item.title }}</text>
				</view>
				<view class="listScode" @click="Sweep">
					<view class="listCenter">
						<view class="iconfont size50 color_66 icon-saoyisao2"></view>
					</view>
				</view>
				<view class="list flex-1" v-for="(item, index) in tabBar.list.slice(2, 4)" :key="item.id" :class="tab == item.id ? 'theme' : 'color_66'" @click="swichTab(item)">
					<view class="iconfont size40 m-bot4" :class="item.icon"></view>
					<text class="h6">{{ item.title }}</text>
				</view>
			</view>
		</view>

		<showModel @cancelFunc="showModal = false" goHome="0" v-if="showModal" type="2"></showModel>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
	name: 'tabBar',
	props: ['tab'],
	data() {
		return {
			showModal: false
		};
	},
	created() {
		uni.hideTabBar();
		if (!this.tab || !this.tabBar) return;
		const item = this.tabBar.list.find((n) => n.id == this.tab);
		this.changeTab({ tabTitle: item.title, tabId: item.id });
	},

	methods: {
		...mapMutations(['changeTab']),
		swichTab(item) {
			// 功能
			if (item.isNav == 2) return this.$pop.funcBtnClick(item);

			// 跳转普通页面
			if (item.isNav == 1) return this.$banerGo(item);

			// 跳tabBar页面
			let pages = getCurrentPages();
			let page = pages[pages.length - 1];
			console.log('当前tab', item, page);
			if (page.$page.fullPath == item.path) return;
			// 所有分类(电商)
			if (item.id == 3 && item.cateType) {
				const path = `${item.path}?cateType=${item.cateType}`;
				this.$rectTo(path);
				return;
			}
			// 某个分类
			if (item.id == 12) {
				const path = `${item.path}?back=0&classId=${item.classId}`;
				this.$rectTo(path);
				return;
			}
			// 订单
			if (item.id == 13) {
				const path = `${item.path}?back=0`;
				this.$rectTo(path);
				return;
			}

			this.$rectTo(item.path);
		},
		// swichTab(item) {
		// 	if(this.tabId == item.id) return
		// 	// 某个分类
		// 	if(item.id == 12){
		// 		const path = `${item.path}?back=0&classId=${item.classId}`
		// 		this.$rectTo(path);
		// 		return;
		// 	}
		// 	// 订单
		// 	if(item.id == 13){
		// 		const path = `${item.path}?back=0`;
		// 		this.$rectTo(path);
		// 		return;
		// 	}

		// 	this.$rectTo(item.path);
		// },
		Sweep() {
			if (!this.vid) return (this.showModal = true);
			this.$pop
				.scanCode()
				.then((res) => {
					if (res.result) this.toUrl(`/joinPage/playCode?id=${res.result}`);
				})
				.catch((err) => {
					console.log(err);
				});
		}
	},

	computed: {
		...mapState(['tabBar', 'color', 'tabId', 'vid'])
	}
};
</script>

<style lang="scss" scoped>
.viewTab {
	width: 100%;
	height: 100rpx;
	box-sizing: content-box;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}

.tabBar {
	width: 100%;
	height: 100rpx;
	background-color: #ffffff;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 77777;
	box-sizing: content-box;
	display: flex;
	align-items: center;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	box-shadow: 0px -1px 2rpx 0px rgba(214, 214, 214, 0.5);
}

.list {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}
.listScode {
	width: 120rpx;
	height: 100%;
	display: flex;
	justify-content: center;
	position: relative;
}
.listCenter {
	width: 98rpx;
	height: 98rpx;
	background-color: #ffffff;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: -24rpx;
	box-shadow: 0px 0px 20rpx 0px rgba(214, 214, 214, 0.5);
	position: relative;
	z-index: 77778;
}
.SconText {
	margin-top: -4rpx;
}
.Cutoff {
	width: 100%;
	height: 360rpx;
	box-sizing: border-box;

	padding-bottom: constant(safe-area-inset-bottom);
	/*兼容 IOS<11.2*/
	padding-bottom: env(safe-area-inset-bottom);
	/*兼容 IOS>11.2*/
}

.theme {
	color: var(--color);
}
</style>
